1. Start
  2. Features
  3. Theme Installation
  4. Home Page Setup
  5. Unlimited Sidebars
  6. Page Builder
  7. How to create a menu
  8. How to add a tile
  9. Getting Started With WooCommerce: Initial Setup

One Touch

The Most Magnificent Theme on Themeforest

Thank you

Features

Theme Installation

 

1.       Unpack ZIP archive. It contains license, documentation and theme itself.

2.       Log in your WordPress site, go to “Appearance>Theme” in the menu left.

3.       Click “Install Themes” tab on the top of the screen.

4.       Click “Upload” in the submenu below.

5.       Now choose a .zip file of the theme that you have and click “Install Now”.

Notes:

If you use Wordpress.com, you cannot upload your own themes.

If your zip file contains several themes, you have to unpack it and then repack each theme separately.

 

6.       After the theme is installed, click “Activate” to activate your theme.

7.       After that click “Save changes” in the bottom of the page.

8.       On the tab “Manage Themes” click “Begin installing plugins”. Choose all the given plugins (recommended), choose option “Install” in the box below and click “Apply”.

9.       When the plugins are installed, click the button “Return to the Dashboard”.

10.   You came to the Page “WPBakery Visual Composer Settings”. If the general settings suit you, just click “Save changes”. If you want your own settings, you may change them at this page, and after that click “Save changes”.

11.    If you want to install our demo version of the theme you have to do the following. Go to “Tools> Import> WordPress> Install Now> Activate plugin and run importer”> choose the file  from the ImportXML directory, that you have in your archive.

Note:

If you want to install our demo website completely, choose the file “content.xml”. If you don’t want to install our demo material for the Woo commerce shop, choose the file “content_no-wocommerce”.

When you have already chosen the file, click “upload file and import”. After that put a tick in front of the “Download and import file attachments” (if you want to have all images)>”Submit>”Have fun!”

Home Page Setup

 

Now you can set up your Home Page. Go to “Settings> Reading> change “static page” from “Help” to “Home page template”>Save changes> Update”.

Now you have a classic layout template of the site. If you want to change layout, go to “My Blog> Visit Site”. In the line above the menu click “Edit Page”> delete the short code [template id="2234"] > click “Add template”> choose template> click “Insert Template> Update”.

Your site is almost ready for work. The last step is to place your own widgets. Go to “Appearance> Widgets”. Setup and configure your widgets.

The setup is finished!

Enjoy your site!

Unlimited Sidebars

 

To create a custom sidebar go to “Theme options>Unlimited sidebars”. In the field “Custom sidebar name” type a name for your sidebar>click “Add sidebar”>”Save Changes”.

Then go to “Appearance>Widgets>find a newly created sidebar in the right column of the page>click triangle in front of the sidebar name> and drag the necessary widgets into it from the left column “Available widgets”.

After that go to “Pages>All pages/Add new> in the box “Select widget sidebars” select your custom sidebar>and click “Update”.

Note that not all the pages layouts support sidebars!!!

Select page layout with sidebars in Theme options>Layout settings>Single pages layout>and select a layout type with sidebars.

Or you may create a single page with custom sidebars in “Pages>Add new”. In the box “Page Attributes” select a layout template, which supports sidebars (e.g. “Page right sidebar” etc.)

That’s all! So easy it is!

Page Builder

 

Page Builder is a tool in Wordpress, which helps you to design and change the website pages display. Our page builder consists of the elements, which you can insert to your page.

The page builder tool consists of two large columns:

1)      Available Blocks. It is a block which contains the list of elements, which can be included to the page template.

2)      Template Area. It is an ordinary template layout, which you can change by dragging the elements from Available Blocks to it. If you want to delete some elements just click on the small triangle on the right side of block, and click “Delete” in the optional panel.

How to create a page template?

Log in your Wordpress site. Go to “Page builder”. Here you see Template Area on the right of the page. To create a new page you have to click “+”, insert the name of the page in the field “Template Name”, and click “Create template”.

Then go to “Pages>Add New”, select the shortcode in the field and delete it, click “Add Template”, choose the necessary page template, click “Insert Template”. In the second box to the right of the page choose template type “Page for custom layouts” (recommended), and after that click “Publish”.

        

Now go back to Page Builder and drag elements from the left column to the right one. You may choose any elements you want and put them in the order you want.

Don’t forget to click “Save Template” after you have made changes!!!

If you want to delete your page template, select appropriate tab and click “Delete Template”.

Each element of the Page Builder has its own settings, which you may adjust for yourself.

Here is a short description of them:

1.       “Wrapper (border)” is a block, which can consist of several elements, and is surrounded by the border. You may drag some elements into it and place them in the order you want.

2.       “Content Full”/”Content Big”/”Content Medium”/”Content Small” mean the same and differ from each other only in size. You may paste there some shortcodes or select page, or display blog instead. 

If you want to paste a shortcode of a revolution slider, go to “Revolution slider”, copy the shortcode of the one you like, and paste it to the required field. If you want to fill in the “Pricing Table”, go to “Pricing Table>All Pricing Tables”, copy a shortcode of the one you like and paste it in the required field.

3.       “Widgets” is an element, in which you can add your widgets, give them a title, and choose a sidebar for it.

4.       “Info Row” is a field, where you can add some greeting texts.

5.       “Clear“ element is used to separate blocks with a horizontal line, and to fill a blank space. This element has its settings, which you can adjust in your own way.

6.       “Info block” is a block, in which you may write any information you want. It has its own settings, which you may adjust in your own way.

7.       “Info Block button” is almost the same as Info Block. The difference is that on page it is viewed as a text with a button below it.

8.       “Mini gallery” element enables you to place on the page a block of mini images of any of the given categories.

9.       “Slider Posts”/”Slider Portfolio”/”Slider Product” is factually the same. You may choose which information will be shown on slider, should it be posts, portfolio or shop items.

10.   “Call to action” element enables you to write some inspiring text or whatsoever.

11.   In the “Recent project” element you may fill in any information about your recent projects.

12.   In the “Quote Block” element you may write any quotations you want.

13.   “Single Post” element enables you to insert any post separated from others.

 Good Luck!

How to create a menu

 

To create a menu for you theme you have to do the following.

Go to Appearance>Menus. In the right box of the page click “+”, write the name of you menu in the field “Menu Name” and click “Save Menu”.

After that you have to create items for your menu. You can create them in the box “Custom Links”. In the field “Label” write the title of the menu item, in the field “URL” you insert the link of the page location. After that click “Add to Menu”. You can also add the menu items from the box “Pages” by selecting them from the list.

You can also create submenus for each item. For this you just have to drag the elements a bit to the right. You can also replace the menu items as well as submenus by dragging them up and down on your own way.

After you have created all the items of your menu, click “Save Menu”.

After the menu is created, you have to customize it. For this you have to go to Appearance>Metro Menu customizer.

First of all select the menu you want to customize from the list in the top of the page.

Now you can change the color of the menu items, you can add background image and background icons. Each of these options has its own parameters (e.g. title, alignment, size etc.), which you can adjust on your own way.

After you have settled the parameters click “Save”.

If you have created more than on menu for a theme, you have to select one, which you want to be shown on you site. This you can make in Appearance>Menus>Theme locations>select the desired menu> and click “Save”.

The customization of your menu is finished!

How to add a tile

 

If you are going to add a tile to your page, do the following.

Go to Pages>Add New. Type the title of the page in the appropriate field on the top of the page>click “Visual composer”>Add element>select “Metro Tile”.

On the page “Edit Metro Tile” you see a number of tile patterns. Select one pattern, and in the editing window bellow, edit your tile:

- select background color

- type a text to be displayed on a tile

- insert a link for the tile

- type a number if needed (available only on some patterns)

- upload an image or an icon to be displayed on a tile (available only on some patterns)

- select size of a tile (single or double)

When you finished editing the tile, click “Save”>“Publish”.

The same way you may add more tile patterns to your page. You just have to click “Edit Page”, do the steps described above and click “Update” to save changes.

One more thing! If you want to place your tile on page not in full width, though only to one side of a page, or in two/three columns, you must first go to “Visual Composer>Add element> and select one box with a fractional number (e.g. ½ or ½ + ½  etc.).

Click “+” on the box with fractional number to add an element> select “Metro tile” and do the same steps described above. 

Getting Started With WooCommerce: Initial Setup

 

E-Commerce is massive, most of us use it and global e-commerce sales are set to top $1.25 trillion by 2013. Over the past few years it has become easier to start your own e-commerce store with products likeZenCart, Open Cart, OSCommerce and Magento. WordPress has a few options for e-commerce but none have stood out as the full enterprise quality system that serious sellers need.

Today I’m going to talk about a product that has changed that and put WordPress right at the front as a serious contender as an e-commerce platform. Say hello to WooCommerce. In the first of our two part series we’ll look at installation and initial setup talking through the various options available to you. In our second tutorial we will look at adding our first product as well as theming and styling WooCommerce.

 

Say Hello to WooCommerce

WooCommerce is a full open-source e-commerce plugin for WordPress from the guys over at WooThemes. It offers a stable and secure platform built right on top of the WordPress Core making it easy to customise to your needs. Launched just over a year ago it has already reached nearly half a million downloads and is fast becoming the e-commerce plugin of choice for many WordPress developers, me included.

WooCommerce adopts a “freemium” style approach, the core plugin is offered completely free however some of the extensions for WooCommerce are sold at a fee. This model works quite well as it allows you to get up and running with what is a feature packed plugin which will suit the majority of users and charging for more complex extensions such as additional features and payment gateways. I’ve personally built a number of sites using WooCommerce over the last year and have only found myself in need of a “premium” extension on a couple of occasions.

Without further ado let’s jump in and get started, I’ll only be looking at the core plugin initially to try and show how easy it is to get started using the open-source plugin.

 

Installation and Initial Setup

Installation is just as easy as any other WordPress plugin. You have 2 options:

           - FTP/SFTP Upload

  1. Visit the WooCommerce Plugin Page on the WordPress.org Plugin Repository and click download. This will download the latest version to your local machine.
  2. Extract the downloaded zip file using your application of choice.
  3. Connect to your WordPress site via FTP or SFTP (SFTP FTW!) and navigate to wp-content/plugins/.
  4. Upload the extracted woocommerce folder to wp-content/plugins/.

 

 

            - WordPress Dashboard

  1. Login to your WordPress site Dashboard.
  2. Navigate to Plugins -> Add New.
  3. Search for “WooCommerce”.
  4. The top result should be “WooCommerce – excelling eCommerce”. Click install now.
  5. Depending on your setup you may be prompted for your FTP username and password.

- Plugin Activation

              - If you uploaded your plugin via FTP/SFTP you now need to navigate to “Installed Plugins” under your WordPress Dashboard. Find WooCommerce in the list and click on activate.

              - If you downloaded the plugin via your WordPress Dashboard you should see “Successfully installed the plugin WooCommerce – excelling eCommerce 1.6.6.” (The version may be different depending on when you are reading this!), underneath simply click Activate Plugin. (If you have already navigated away from this page you can simply follow the above step, navigating to your Installed Plugins page to activate.)

- Pages Setup – You should see a nice magenta banner “Welcome to WooCommerce – You’re almost ready to start selling :)”. WooCommerce needs some pages to be created for it to function, it can do this automatically for you by simply clicking “Install WooCommerce Pages”. (You can change these page names later if you want to).

That’s it WooCommerce is installed! You should now be looking at the WooCommerce settings page. This is where you will be configuring your store. Let’s go through the initial settings.

General Settings

The first thing we need to do is setup where we are and our currency. These are simple dropdowns and you also get a third dropdown to allow you to limit which countries you are willing to ship to. You currently can only set one currency, which might be an issue for some international sellers, however there is an extension to show dynamic currency conversions in your store using the Open Source Currency Exchange API. This will only serve as a guide for your visitors as payment will still be taken in the base currency you set under general settings. It is also a paid extension.

 

Next we get some Checkout and account options. Here you can configure things like enabling guest checkouts (so they don’t need to register an account with your site), you can force SSL on checkout pages (particularly useful if your payment gateway requires this), if you want to enable coupons (more on this later). You can also set some account functions like allow user registration without an order, whether to use email addresses for usernames and if you want to hide the WordPress Admin from customers. Most of these are personal preference and you can add and remove these options whenever you like. The default options are a good place to start and I always disallow customer access to the WordPress admin.

Further down we have some options for styling and scripts. You can enable the default WooCommerce CSS and customise it from here or turn it off completely. We’ll go into more detail on this later. You also get a couple of UI options including quite a nice Lightbox effect which I usually enable.

Finally on this page we see our digital downloads options. With WooCommerce you can easily sell virtual and downloadable products these options allow you to define how they should be handled and how to grant access. The options are pretty self explanatory as with most of the WooCommerce setup.

Catalog Settings

Most of the options are easy to understand, one definately worth a look is the “Show subcategories”. These three little checkboxes can really affect your look. Check these boxes and your main store page will show your categories instead of products. This is really useful as it gives much more of a e-commerce feel, with lots of products simply having the products shown can make navigating your product categories quite difficult as you have to rely on the WooCommerce widgets.

 

Product data is also one to watch, it gives you the option to show or hide some fields on your products, it is up to you to decide if you need these fields and to enable/disable according to your needs. Likewise hiding underneath is the ratings options. Again whether or not to allow product reviews is your personal choice, but it is nice that WooCommerce gives you the option to turn it on or off.

Skipping to the bottom we see the Image options. Here you set the image dimensions of your products, these are essentially the image sizes for the Products custom post type WooCommerce creates for you. Catalog images are your archive style pages with single product images and product thumbnails being exactly what they say they are. If you do change the image sizes after adding products you will need to regenerate your images using something like the Regenerate Thumbnails Plugin as like all WordPress media the extra image sizes are created on upload based on these settings.

Other Settings

I’m going to speed through some of the other settings here as most are fairly self-explanatory. I recommend you setup a local WordPress site and have a play with WooCommerce to check out the different options.

So hopefully we have WooCommerce installed and we’ve been through our intial setup. There’s still a little bit of work to do before we can start adding our products though.

Setting Up Shipping

Out of the box WooCommerce comes with a range of shipping options and even gives you the option to switch it off completely if you are dealing with downloadable or virtual products. The core shipping options allow you to set fixed rate costs for domestic, international and local delivery and allow you to specify different classes like Next Day, Priority Delivery etc by using what are called shipping classes. You can easily set which countries and areas qualify for your different shipping methods and you should be able to get your store up and running using these basic methods.

Let’s setup a shipping method. So for my store I want to charge a flat fee for all deliveries to the UK and then a flat fee for international shipping. From my shipping options I have disabled all but “Flat Rate” and “International Shipping”. On my main shipping options page I have ticked “Enable Shipping” and “Hide shipping costs until an address is entered”. I don’t want the shipping calculator to be shown so have unticked this (this is more for use when you have complicated shipping rules and charges in place). Now I don’t mind shipping to a seperate billing address so I’m allowing that, however I am setting the billing address as the default shipping address. You can see my setup below.

So now onto the charges. So firstly my flat rate; I’ve enabled it and changed the “Method Title” to UK Delivery (this is what is output on the front end). For my method availability I have set it to specific countries and specified United Kingdom in the box below. On people with a shipping address within the United Kingdom will be able to use this shipping method. Next I have set the “Calculation Type” to Per Order and left it as Taxable. My Default cost is set to 4.99 I’m not charging a handling fee.

Now for my International Shipping. I’ve enabled it, the default name of “International Delivery” makes sense. Now for availablity I’ve this time set it to “Excluding selected countries” and then entered United Kingdom. Everything else is the same as for UK delivery except the price which I have set to 7.99. Now anybody ordering with delivery to a UK address should see the United Kingdom Delivery price and anybody with a delivery address outside the United Kigdom will see our international price.

This is obviously a very basic shipping setup. You can do much more using premium shipping extensions. You can use the Table Rate Shipping Extension to create complicated shipping rules to calculate shipping based on weight and dimensions of a product or charge a fixed fee for the first item and then a smaller fee for additional items in a cart (This extension is extremely well put together and can give you endless options for your shipping charges). You can also get extensions to hook into popular shipping carriers APIs such as UPS, FedEx and the USPS meaning you can get real-time and correct shipping pricing from your carrier. Now you pay for the extra shipping methods but the small cost involved should be well inline without whatever profits your store is generating with the average shipping extension coming in at around $49.

Setting Up Your Payment Gateways

Okay, initial setup is done. We have our shipping methods setup. Now we need to actually get some money from our users! As with the shipping methods you get a few basic payment gateway options out of the box. Most of them completely pointless for most e-commerce stores, things like Direct Bank Transfer, Cheque, Cash On Delivery. What you do get is PayPal which should be fine for most people starting out and Mijireh Checkout. Mijireh is payment processor that has partnered with WooCommerce hence why it is included for free. Mijireh Checkout provides a fully PCI Compliant, secure way to collect and transmit credit card data to your payment gateway while keeping you in control of the design of your site. Mijireh supports a wide variety of payment gateways: Stripe, Authorize.net, PayPal, eWay, SagePay, Braintree, PayLeap, and more. Obviously you need an account with one of the supported payment gateways and as well as the charges you will incur from your gateway you will also have to pay a $0.50 transaction fee to Mijireh. I’ve not used this myself as with the shipping extensions you can purchase additional payment gateway modules and prefer a small one of cost rather than a recuring charge. The choice is yours.

specify your PayPal page stylePayPal sandbox< >Login to your WordPress site Dashboard.Navigate to Plugins -> Add New.Search for “WooCommerce”.The top result should be “WooCommerce – excelling eCommerce”. Click install now.Depending on your setup you may be prompted for your FTP username and password.Plugin ActivationIf you uploaded your plugin via FTP/SFTP you now need to navigate to “Installed Plugins” under your WordPress Dashboard. Find WooCommerce in the list and click on activate.If you downloaded the plugin via your WordPress Dashboard you should see “Successfully installed the plugin WooCommerce – excelling eCommerce 1.6.6.” (The version may be different depending on when you are reading this!), underneath simply click Activate Plugin. (If you have already navigated away from this page you can simply follow the above step, navigating to your Installed Plugins page to activate.)Pages Setup – You should see a nice magenta banner “Welcome to WooCommerce – You’re almost ready to start selling :)”. WooCommerce needs some pages to be created for it to function, it can do this automatically for you by simply clicking “Install WooCommerce Pages”. (You can change these page names later if you want to).Pages Settings – Remember during our plugin activation we created some pages? Well it is here you can change them. You can simply update the already created pages (found along with all the other pages you have on your site) or you can create new pages and link them from this page. You can also change your shop permalink structure from here although I have never found the need personally.Inventory Settings – Another small and simple page. Basically do you want to enable stock management or not? If you do you get a few options on what to do about low stock etc.Tax Settings – From here you can define your tax rules with multiple tax classes and local tax rules. Particularly useful actually especially for international selling. As with all the settings you will either need it or not and switching it off is as simple as a checkbox.For our tutorial let’s start with PayPal setup. No surprise it is simple to setup! Enable it enter your PayPal email address and you done. You get a few other options you can tweak like invoice prefixing for PayPal and you can . You can also enable or disable  mode (it is enabled by default) brilliant for testing your store beofre you go live! That’s it Payment gateway is probably the easiest bit of the whole setup.

Conclusion

So we have WooCommerce installed and our initial setup is complete, that wasn’t too painful now was it? We’ve setup our shipping methods and also setup our payment gateways all with very little time or effort. In our second article we will go through adding some products and talk about the different product types WooCommerce offers, we’ll have a look at how to style and theme WooCommerce and discuss next steps for extending WooCommerce.